<template>
  <div class="bcf pos-r">
    <div class="">
      <div style="width: 85vw;margin: 0 auto;" class="padt10">
        <mu-tabs inverse :value.sync="editTab" class="bdlso bdrso ">
          <mu-tab value="main">基本信息</mu-tab>
          <mu-tab value="product" v-if="model.id > 0">订单明细</mu-tab>
          <mu-tab value="payment" v-if="model.id > 0">回款信息</mu-tab>
          <mu-tab value="import_sellFeedback" v-if="model.id > 0">从报价单导入</mu-tab>
        </mu-tabs>
        <div class="bcf bdso pad5" v-show="editTab === 'main'" style="width: 85vw;min-height: 60vh">
          <EzData ref="editForm" :config="configEdit.main()" v-model="model" :key="editKey"></EzData>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'product'" style="width: 85vw;min-height: 60vh">
          <SellOrderProduct :base="{belongToId:model.id}" :params="{belongToId:model.id}"
                            :key="productListKey"></SellOrderProduct>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'payment'" style="width: 85vw;min-height: 60vh">
          <SellOrderPayment :base="{belongToId:model.id}" :params="{belongToId:model.id}"
                            :key="productListKey"></SellOrderPayment>
        </div>
        <div class="bcf bdso pad5" v-if="editTab === 'import_sellFeedback'" style="width: 85vw;min-height: 60vh">
          <title-a>选择报价单</title-a>
          <div class="mu-form-item flex-r">
            <div class="flex1">
              <EzSearch :config="sellFeedbackSearchConfig" v-model="sellFeedbackId"
                        key="sellFeedbackSearchConfig"></EzSearch>
            </div>
            <div v-show="sellFeedbackProductSelected.length > 0">
              <mu-button flat small color="primary" @click="importSellFeedbackProduct">
                <mu-icon value="add" right></mu-icon>
                导入选中清单项目
              </mu-button>
            </div>
          </div>
          <title-a>报价清单</title-a>
          <mu-data-table checkbox select-all selectable :selects.sync="sellFeedbackProductSelected" stripe
                         :columns="sellFeedbackProductTableConfig" height="400" :data="sellFeedbackProduct" rowKey="id">
            <template slot-scope="scope">
              <td :align="col.align" v-for="col in sellFeedbackProductTableConfig" :key="`${scope.row.id}${col.name}`">
                <!--这个ID只是一个自定义的示例-->
                <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
              </td>
            </template>
          </mu-data-table>
        </div>
      </div>
    </div>
    <div class="w100 tac padt10">
      <mu-button class="mar1" color="primary" @click="save">
        <mu-icon left value="save"></mu-icon>
        保存
      </mu-button>
      <mu-button class="mar1" color="warning" @click="cancelEdit">
        <mu-icon left value="close"></mu-icon>
        取消
      </mu-button>
    </div>
    <div class="pos-a t0 l0 pad10" v-if="!isComp">
      <mu-button color="primary" icon @click="goback(-1)">
        <mu-icon value="arrow_back"></mu-icon>
      </mu-button>
    </div>
  </div>
</template>

<script>
import mixin_edit from "./js/mixin_edit";
import EzData from "@/comps/EzData";
import SellOrderProduct from "@/pages/v1/erp/SellOrderProduct/SellOrderProduct.vue";
import EzSearchConfig from "@/comps/form/EzSearchConfig";
import listBuilder from "@/comps/list/listBuilder";
import apiSellFeedback from "@/pages/v1/erp/SellFeedback/js/apiSellFeedback";
import EzSearch from "@/comps/form/EzSearch.vue";
import TitleA from "@/comps/comm/TitleA.vue";
import EzListViewer from "@/comps/list/EzListViewer.vue";
import apiSellFeedbackProduct from "@/pages/v1/erp/SellFeedbackProduct/js/apiSellFeedbackProduct";
import apiSellOrder from "@/pages/v1/erp/SellOrder/js/apiSellOrder";
import SellOrderPayment from "@/pages/v1/erp/SellOrderPayment/SellOrderPayment.vue";

export default {
  name: "v1-erp-SellOrder-edit",
  components: {SellOrderPayment, EzListViewer, TitleA, EzSearch, SellOrderProduct, EzData},
  mixins: [mixin_edit],
  data() {

    let sellFeedbackSearchConfig = EzSearchConfig()
    sellFeedbackSearchConfig
        .setApi(apiSellFeedback.urlChoice)
        .setApiSearchKeys(["sn__regex", "title__regex"])

    let lbSellFeedback = listBuilder()
    lbSellFeedback.add("id", "#", 80)
    lbSellFeedback.add("product", "产品", 180).setListIsObjectName()
    lbSellFeedback.add("num", "数量", 80)
    lbSellFeedback.add("unit", "单位", 80).setListIsObjectName()
    lbSellFeedback.add("price", "参考价格", 80)
    lbSellFeedback.add("note", "备注", 0)
    lbSellFeedback.add("row", "RN", 80)
    return {
      productListKey: "",
      sellFeedbackId: 0,
      sellFeedbackSearchConfig,
      sellFeedbackProduct: [],
      sellFeedbackProductSelected: [],
      sellFeedbackProductTableConfig: lbSellFeedback.headers,
    }
  },
  mounted() {
  },
  methods: {
    getSellFeedbackProduct() {
      apiSellFeedbackProduct.findBy({
        _where: {belongToId: this.sellFeedbackId},
        _dumps: ["belongTo", "product", "unit", "tax"],
        page: 1, limit: 0,
      }, res => {
        this.sellFeedbackProduct = res
      })
    },
    importSellFeedbackProduct() {
      let selectedId = []
      for (let index of this.sellFeedbackProductSelected) {
        selectedId.push(this.sellFeedbackProduct[index].id)
      }
      apiSellOrder.importProduct({
        id: this.model.id,
        productIds: selectedId,
        from: "sellFeedback",
      }, res => {
        this.$toast.success(res.message)
        this.productListKey = Math.random()
        this.editTab = "product"
      })
    },
  },
  watch: {
    sellFeedbackId() {
      this.getSellFeedbackProduct()
    }
  }
}
</script>

<style scoped>

</style>